<template>
  <div class="container">
    <radio-group class="radio-group">
      <div class="address-item" v-for="(item, index) in addressLists" :key="index" :index="index">
        <div class="info">
          <span class="nickName">{{item.name}}</span>
          <span>{{item.tel}}</span>
          <div class="address">{{item.address_detail}}</div>
        </div>
        <van-icon name="edit" @click="changeDeafult(item.id, index)" />
      </div>
    </radio-group>
    <div class="btn">
      <van-button class="mk-button" block  type="primary" size="normal" @click="addAddress">添加新的地址</van-button>
    </div>
    <van-popup :show="addStatus" position="bottom" @close="addStatus = false">
      <div class="address-form">
        <van-cell-group>
          <van-cell @click="switchArea" value-class="address-item">
            <span class="title">收件地区</span>
            <span class="value">{{showArea || '选择收件地址'}}</span>
          </van-cell>
          <van-field :value="form.name" label="收货人" data-name="name" clearable placeholder="请输入用户名" @input="onChangeField" />
          <van-field :value="form.tel" label="联系电话" data-name="tel" clearable placeholder="请输入手机号" @input="onChangeField" />
          <van-field :value="form.address_detail" label="详细地址" data-name="address_detail" clearable placeholder="如街道、楼层、门牌号" @input="onChangeField" />
          <van-switch-cell title="默认收货地址" :checked="form.is_default" @change="changeDefault" />
          <div class="form-btn">
            <van-button class="mk-button" type="primary" size="normal" block="true" @click="saveForm(form.id)">保存</van-button>
            <van-button class="mk-button" plain type="primary" size="normal" block="true" @click="backTable(form.id)">{{backAddress}}</van-button>
          </div>
        </van-cell-group>
      </div>
    </van-popup>
    <van-popup :show="selectArea" position="bottom">
      <van-area v-if="areaList" :area-list="areaList" title="选中省市区" @confirm="onSaveArea" @cancel="switchArea" />
    </van-popup>
    <van-dialog id="van-dialog" />
    <van-toast id="van-toast" />
  </div>
</template>
<script>
import Dialog from 'vant-weapp/dist/dialog/dialog'
import Toast from 'vant-weapp/dist/toast/toast'
import * as AddressAction from '@/api/address'
import * as CommonAction from '@/api/common'
import Utils from '@/utils'

export default {
  data () {
    return {
      backAddress: '',
      addStatus: false,
      selectArea: false,
      addressLists: [],
      areaList: null,
      showArea: '',
      form: {
        is_default: true,
        area_code: ''
      }
    }
  },
  beforeMount () {
    this.getArea()
  },
  onShow () {
    this.addStatus = false
    this.addressLists = []
    wx.showNavigationBarLoading()
    this.upList()
  },
  onPullDownRefresh () {
    wx.showNavigationBarLoading()
    this.upList()
    wx.stopPullDownRefresh()
  },
  methods: {
    // 增加地址
    addAddress () {
      this.backAddress = '返回'
      this.showArea = ''
      this.form = {
        is_default: true,
        area_code: ''
      }
      this.addStatus = !this.addStatus
    },
    // 修改默认地址
    changeDeafult (id, index) {
      this.backAddress = '删除'
      this.getSingleAddress(id)
      this.addStatus = !this.addStatus
    },
    onChangeField (event) {
      this.form[event.currentTarget.dataset.name] = event.mp.detail
    },
    switchArea () {
      this.selectArea = !this.selectArea
      wx.hideKeyboard()
    },
    // 保存填写的表单
    onSaveArea (event) {
      this.form.province = event.mp.detail.values[0].name
      this.form.city = event.mp.detail.values[1].name
      this.form.county = event.mp.detail.values[2].name
      this.form.area_code = event.mp.detail.values[2].code
      this.showArea = `${this.form.province} ${this.form.city} ${
        this.form.county
      } `
      this.switchArea()
    },
    saveForm (id) {
      if (!this.form.tel) {
        Toast('手机号不能为空')
        return
      }
      if (!this.form.name) {
        Toast('姓名不能为空')
        return
      }
      if (!this.form.address_detail) {
        Toast('地址不能为空')
        return
      }
      if (!this.showArea) {
        Toast('请选择地区')
        return
      }
      if (!Utils.validator.isMobile(this.form.tel)) {
        Toast('请输入有效的手机号')
        return
      }
      if (this.backAddress === '删除') {
        AddressAction.update(id, this.form).then((data) => {
          this.upList()
          Toast('更新成功')
        })
      } else {
        AddressAction.store(this.form).then((data) => {
          this.upList()
          this.showArea = ''
          Toast('添加成功')
        })
      }
      this.addStatus = !this.addStatus
    },
    backTable (id) {
      if (this.backAddress === '删除') {
        Dialog.confirm({
          title: '我的地址',
          message: '您要删除当前地址吗？'
        }).then(() => {
          this.delSingleAddress(id)
        }).catch(() => {})
      }
      this.addStatus = !this.addStatus
    },
    changeDefault (e) {
      this.form.is_default = !this.form.is_default
    },
    getSingleAddress (id) {
      AddressAction.show(id).then(data => {
        this.form = data
        this.showArea = `${this.form.province} ${this.form.city} ${this.form.county}`
      })
    },
    // 获取省市县列表
    getArea () {
      CommonAction.area().then(data => {
        this.areaList = data
      }).catch(err => console.log(err.msg))
    },
    delSingleAddress (id) {
      AddressAction.del(id).then(data => {
        this.upList()
        Toast('删除成功')
      })
    },
    // 更新地址
    upList () {
      AddressAction.list().then(data => {
        this.addressLists = data
        wx.hideNavigationBarLoading()
      }).catch(err => console.log(err.msg))
    }
  }
}
</script>
<style lang="less" scoped>
.container {
  position:relative;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  min-height: 1200rpx;
  padding-bottom:80px;
  .mk-button {
    .van-button--primary {
      color: #ffffff;
      background-color: #E4668D;
      border: 1px solid #E4668D;
    }
    .van-button--plain {
      &.van-button--primary {
        color: #ffffff;
        background-color: #E4668D;
      }
    }
  }
 .address-title {
  .van-cell__value.van-cell__value{
    flex: 2;
  }
}
  .address-item {
    width: 100%;
    background: #F8F8F8;
    border-top: 1rpx solid #f1f1f1;
    padding: 30rpx;
    display: flex;
    flex-flow: row wrap;
    .choose {
      width: 10%;
    }
    .info {
      width: 85%;
      font-size: 14px;
      line-height: 1.5;
      .nickName {
        margin-right: 10rpx;
      }
      .address {
        font-size: 12px;
        line-height: 1.5;
        color: #666;
      }
    }
  }
  .btn {
    margin: 15rpx;
  }
  .form {
    margin: 15rpx;
  }
  .form-btn{
    margin: 20rpx;
  }

}

</style>

